import React, { useEffect, useState,useCallback } from 'react';
import { Carousel,Pagination  } from 'antd';
import { useHistory,withRouter,useLocation} from 'react-router-dom';
import 'whatwg-fetch'
import head from "./css/detailmore.module.css"
/* import Loadable from "../../../loadable.jsx";
const head=Loadable(() => import('./css/detailmore.module.css')) */
import  Swiper from "./swiper.jsx"

function LeftConent(props) {
    const [homeinfo,sethomeinfo]=useState([]);
    const [mypage,setmypage]=useState(1)
    var mypagesize=3;
    function onchange(page,pagesize){
        setmypage(page)
          mypagesize=pagesize;
    }
    useEffect(()=>{
        const city=props.cityname?props.cityname:"上海";
        const url = `/more?city=${city}`
        fetch(url)
        .then(res=>res.json())
        .then(data=>{   
            //console.log(data.res);           
            data.res.forEach((el)=>{
                     el.img=JSON.parse(el.img);
                     el.text=JSON.parse(el.text);
                     el.comment=JSON.parse(el.comment);
            })         
            sethomeinfo(data.res) ;               
        })  
    },[])
    let history=useHistory()
    let tiaozhuan=useCallback(()=>{
        history.push({pathname:"/detail?detailid=3",state: {}});
       // props.history.push("/detail")
    },[]);
    var isCollection=false;
    let changecolor=useCallback((e)=>{
        // console.log(e.currentTarget.type=="button");
         if(e.currentTarget.type=="button"){
             e.stopPropagation();
             e.cancelBubble=true;
             isCollection=!isCollection
             if(isCollection==true){
                e.currentTarget.children[0].children[0].style.fill="#F20D0D";
                
             }  else{
                e.currentTarget.children[0].children[0].style.fill="";
             }        
            }
    })

    return (
        <div>
            <div className={head.marg}>
                <span className={head.toptext}>新冠肺炎疫情防控提示</span>
                <span>请您关注目的地风险等级和防控政策，留意预订房源的取消政策，合理安排出行，做好自我防护。</span>
                 <p>{homeinfo.length}处住宿</p>
            </div>
            <div>
                <div>
                    {homeinfo.map((el,index)=>{
                           return (
                               (index<mypage*mypagesize&&index>=(mypage-1)*mypagesize)&&    <div className={head.contstyle} key={index} onClick={tiaozhuan}>
                               <div className={head.leftfloat} >
                                   <Swiper par={el.img}></Swiper> 
                                   <button type="button" className={head.Collection}  onClick={changecolor} aria-busy="false" style={{padding: "8px", margin: "-8px"}}>
                                   <svg viewBox="0 0 24 24" fill="#484848" fillOpacity="0.5" stroke="#ffffff"
                                   strokeWidth="2" focusable="false" aria-label="添加房源到心愿单" role="img" strokeLinecap="round" strokeLinejoin="round" style={{height: "28px",width: "28px", display: "block", overflow: "visible"}}>
                                       <path d="m17.5 2.9c-2.1 0-4.1 1.3-5.4 2.8-1.6-1.6-3.8-3.2-6.2-2.7-1.5.2-2.9 1.2-3.6 2.6-2.3 4.1 1 8.3 3.9 11.1 1.4 1.3 2.8 2.5 4.3 3.6.4.3 1.1.9 1.6.9s1.2-.6 1.6-.9c3.2-2.3 6.6-5.1 8.2-8.8 1.5-3.4 0-8.6-4.4-8.6" strokeLinejoin="round" >
                                       </path>
                                   </svg>
                                   </button> 
                               </div>
                               <div className={head.rightfloat}>
                                   <p>{el.text.huxing}</p>
                                   <p>{el.text.describe}</p>
                                   <p>{el.comment.comment}</p>
                               </div>
                               <div className={head.pricestyle}>
                                   <p>￥{el.newprice}/晚</p>
                                   <p className={head.myoldprice}>￥{el.oldprice}/晚</p>
                               </div>
                           
                        </div>                              
                       )                           
                    })}
                    <div className={head.pagestyle}>
                    <Pagination defaultCurrent={1} total={homeinfo.length} defaultPageSize={3} size="small" onChange={onchange} className={head.pageson}/>
                    </div>
                </div>
            </div>
        </div>
    );
}
/*   */

export default LeftConent// withRouter(LeftConent);
